<template>
  <div>
    <div class="list1">
        
        <el-input class="input2" size="medium" v-model="input1" placeholder="车位名称" style="width: 300px; margin-right: 15px;"></el-input>
        <el-input class="input1" size="medium"  v-model="input2" placeholder="应缴金额" style="width: 300px; margin-right: 15px;"></el-input>
        <el-select v-model="select1" class="select1" size="medium" clearable placeholder="缴费状态" style="width: 300px; margin-right: 15px;">
            <el-option
            label="已缴费"
            :value="1">
            </el-option>
            <el-option
            label="未缴费"
            :value="2">
            </el-option>
        </el-select>
        <el-button class="button1" size="medium" type="primary" icon="el-icon-search" @click="lookfor" style="padding-left: 30px;padding-right: 30px; margin-right: 15px;">查询</el-button>
        <el-button class="button2" size="medium" type="success" icon="el-icon-document-copy" @click="exportdata" style="padding-left: 30px;padding-right: 30px; margin-right: 15px;">全量导出</el-button>
        <el-button class="button3" size="medium" type="primary" icon="el-icon-refresh-right" @click="rewrite" style="padding-left: 30px;padding-right: 30px; margin-right: 15px;">重置</el-button>

    </div>
    <div style="margin-top: 20px;">
              <el-table
                :data="orderData"
                border
                v-loading="loading"
                style="width: 100%"
                >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50">
                </el-table-column>
                <el-table-column
                    prop="parkname"
                    align="center"
                    label="车位名称"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="parkpay"
                    label="车位金额"
                    align="center"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="startdate"
                    align="center"
                    label="开始时间">
                    <template slot-scope="scope">
                      {{ scope.row.startdate ==null ?"暂无":scope.row.startdate }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="enddate"
                    align="center"
                    label="结束时间">
                    <template slot-scope="scope">
                      {{ scope.row.enddate ==null ?"暂无":scope.row.enddate }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="orderpay"
                    align="center"
                    label="应缴金额">
                    <template slot-scope="scope">
                      {{ scope.row.orderpay ==null ?"暂无":scope.row.orderpay }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="orderstatus"
                    align="center"
                    label="缴费状态">
                    <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.orderstatus"
                        class="switchStyle"
                        disabled
                        :active-value="1"
                        :inactive-value="2"
                        active-text="已缴费"
                        inactive-text="未缴费"
                        width="75"
                        >
                      </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="washnum"
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button plain @click="noticemessage(scope.row.startdate,scope.row.enddate,scope.row.orderpay,scope.row.orderstatus,scope.row.note,scope.row.id,)">通知缴费</el-button>
                      <el-button style="color: #8CC5FF;" @click="detailmessage(scope.row.startdate,scope.row.enddate,scope.row.orderpay,scope.row.orderstatus,scope.row.note,scope.row.id,)" plain>缴费详情</el-button>
                    </template>
                </el-table-column>
      
                
              </el-table>
    </div>
    <div style="text-align: right;margin-top: 20px;">
      <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="ordertotal">
          </el-pagination>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible1"
        width="60%"
        title="车位订单通知"
        :before-close="handleClose">
        
        <el-form :model="noticeForm" :rules="noticerules" ref="noticeForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="开始时间"  prop="startdate" style="margin-bottom: 30px">
            <el-date-picker v-model="noticeForm.startdate"  format="yyyy-MM-dd"      value-format="yyyy-MM-dd"  type="date"   placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="enddate" style="margin-bottom: 30px">
            <el-date-picker v-model="noticeForm.enddate"   format="yyyy-MM-dd"      value-format="yyyy-MM-dd"  type="date"   placeholder="选择日期" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="应缴金额" prop="orderpay" style="margin-bottom: 30px">
              <el-input v-model="noticeForm.orderpay"></el-input>
          </el-form-item>
          <el-form-item label="缴费状态" prop="orderstatus" style="margin-bottom: 30px">
              <el-select v-model="noticeForm.orderstatus" placeholder="请选择" style="width: 100%;">
                  <el-option label="已缴费" :value="1"></el-option>
                  <el-option label="未缴费" :value="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="通知缴费" prop="note">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="noticeForm.note">
            </el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
              <el-button type="primary" @click="closenotice">关闭</el-button>
              <el-button type="primary" @click="sotrenotice">通知</el-button>
              <el-button type="primary" @click="rewritenotice">重置</el-button>
          </el-form-item>
          </el-form>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible2"
        width="60%"
        title="车位订单详细"
        :before-close="handleClose">
        
        <el-form :model="noticeForm2"  :rules="noticerules" ref="noticeForm2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="开始时间" prop="startdate" style="margin-bottom: 30px">
            <el-date-picker v-model="noticeForm2.startdate" disabled  type="date"   placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="enddate" style="margin-bottom: 30px">
            <el-date-picker v-model="noticeForm2.enddate"  type="date" disabled   placeholder="选择日期" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="应缴金额" prop="orderpay" style="margin-bottom: 30px">
              <el-input v-model="noticeForm2.orderpay" disabled></el-input>
          </el-form-item>
          <el-form-item label="缴费状态" prop="orderstatus" style="margin-bottom: 30px">
              <el-select v-model="noticeForm2.orderstatus" placeholder="请选择" disabled style="width: 100%;">
                  <el-option label="已缴费" :value="1"></el-option>
                  <el-option label="未缴费" :value="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="通知缴费" prop="note">
            <el-input
              type="textarea"
              disabled
              :rows="3"
              placeholder="请输入内容"
              v-model="noticeForm2.note">
            </el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
              <el-button type="primary" @click="closenotice2">关闭</el-button>
          </el-form-item>
          </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  data(){
    return{
      loading:false,
      // 模态框开关
      dialogVisible1:false,
      dialogVisible2:false,
      // 数据
      orderData:[],
      input1:"",
      input2:"",
      select1:"",
      //初始化载荷
      orderpage:{
        parkname: "",
        orderstatus: "",
        orderpay: "",
        pageNum: 10,
        currPage: 0,
      },
      //总页数
      ordertotal:"",
      //通知缴费
      noticeForm:{
        u_id:"",
        startdate:"",
        enddate:"",
        orderpay:"",
        orderstatus:"",
        note:"",
        token:sessionStorage.getItem("token")
      },
      noticeForm2:{
        u_id:"",
        startdate:"",
        enddate:"",
        orderpay:"",
        orderstatus:"",
        note:"",
        token:sessionStorage.getItem("token")
      },
      //缴费详细

      //编辑校验规则
      noticerules: {
                startdate: [
                    { required: true, message: '车位名称不能为空', trigger: 'blur' },
                ],
                enddate: [
                    { required: true, message: '车位金额不能为空', trigger: 'blur' },
                ],
                orderpay: [
                    { required: true, message: '车位类型不能为空', trigger: 'blur' },
                ],
                orderstatus: [
                    { required: true, message: '车位状态不能为空', trigger: 'blur' },
                ],
                
            },
    }
  },
  created(){
    this.getordermessage()
  },
  methods:{
    //初始化数据
    getordermessage(){
      this.loading = true
      this.$axios.get("http://community.byesame.com/parking/getParkOrder",{params:this.orderpage}).then((res)=>{
        this.ordertotal = res.data.total
        setTimeout(() => {
          this.loading = false
        }, 500);
        this.orderData = res.data.data
        for(let i =0;i<this.orderData.length;i++){
                  if(this.orderData[i].startdate != null){
                    const date = new Date(this.orderData[i].startdate);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.orderData[i].startdate = formattedTime;
                  }
                    
                    
                }
        for(let i =0;i<this.orderData.length;i++){
                  if(this.orderData[i].enddate != null){
                    const date = new Date(this.orderData[i].enddate);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.orderData[i].enddate = formattedTime;
                  }
                    
                    
                }
      })
    },
     //分页器方法
     handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.orderpage.currPage = 0
            this.orderpage.pageNum = val
            this.getordermessage()
      },
      handleCurrentChange(val) {
          this.orderpage.currPage = val-1;
          this.getordermessage()
      },
      //第一行三小只
      lookfor(){
        this.orderpage.parkname = this.input1
        this.orderpage.orderpay = this.input2
        this.orderpage.orderstatus = this.select1
        this.orderpage.currPage = 0
        this.getordermessage()
      },
      rewrite(){
        this.orderpage.parkname = ""
        this.orderpage.orderpay = ""
        this.orderpage.orderstatus = ""
        this.orderpage.currPage = 0
        this.orderpage.pageNum = 10
        this.getordermessage()
      },
       //批量导出
       exportdata(){
          this.$confirm('确定全量导出excel文件？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
                let data = []
                for(let i =0;i<this.orderData.length;i++){
                    let a = {
                        "车位名称":this.orderData[i].parkname,
                        "车位金额":this.orderData[i].parkpay,
                        "开始时间":this.orderData[i].startdate,
                        "结束时间":this.orderData[i].enddate,
                        "应缴金额":this.orderData[i].orderpay,
                        "缴费状态":this.orderData[i].orderstatus,
                    }
                    data[i]=a
                    
                }
                const worksheet = XLSX.utils.json_to_sheet(data) //传入要导出的表格数据
                // 表格数据
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook,worksheet,"data");//data为自定义表名
                XLSX.writeFile(workbook,"one.xlsx");//ond.xlsx  文件名
                this.$message({
                  type: 'success',
                  message: '导出成功!'
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消导出'
            });          
          });
  
            
        },
        //通知缴费
        noticemessage(startdate,enddate,orderpay,orderstatus,note,id){
          this.noticeForm.startdate = startdate
          this.noticeForm.enddate = enddate
          this.noticeForm.orderpay = orderpay
          this.noticeForm.orderstatus = orderstatus
          this.noticeForm.note = note
          this.noticeForm.u_id = id
          this.dialogVisible1 = true
        },
        //缴费详情
        detailmessage(startdate,enddate,orderpay,orderstatus,note,id){
          this.noticeForm2.startdate = startdate
          this.noticeForm2.enddate = enddate
          this.noticeForm2.orderpay = orderpay
          this.noticeForm2.orderstatus = orderstatus
          this.noticeForm2.note = note
          this.noticeForm2.u_id = id
          this.dialogVisible2 = true
        },
        //通知三小只
        closenotice(){
          this.dialogVisible1 = false
        },
        closenotice2(){
          this.dialogVisible2 = false
        },
        sotrenotice(){
          this.$refs['noticeForm'].validate((valid) => {
          if (valid) {
              this.$axios.post("http://community.byesame.com/parking/editParkOrder",this.noticeForm).then((res)=>{
                console.log(res)
                this.$message({
                  message: '通知成功',
                  type: 'success'
                });
                this.dialogVisible1 = false
                this.getordermessage()
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
        },
        rewritenotice(){
          this.noticeForm.startdate = ""
          this.noticeForm.enddate = ""
          this.noticeForm.orderpay = ""
          this.noticeForm.orderstatus = ""
          this.noticeForm.note = ""
          
        },

  }
}
</script>

<style scoped>
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
::v-deep td {
        padding-top: 5px!important;
        padding-bottom: 5px!important;
    }


::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
  z-index: 1;
  right: 20px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
  z-index: 1;
  left: 20px;
}
/*显示文字*/
::v-deep .el-switch__label.is-active {
  display: block;
}
::v-deep .el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 100px;
}

</style>